<template>
  <div>
      <!-- 头部导航 -->
      <van-nav-bar fixed>
    <template #left>
        <van-image class="logo" :src="require('../../assets/toutiao_logo.png')"/>
    </template>
    <template #right>
        <van-icon name="search" color="#fff" size="0.48rem" />
    </template>
      </van-nav-bar>
      <!-- Tab导航 -->
    <div class="box">
        <van-tabs @click="tabFn" sticky offset-top='1.22666667rem'>
  <van-tab
  v-for="obj in userList"
  :key="obj.id"
  :title="obj.name"
    :name="obj.id"
  >
  <!-- 文章列表内容区域 -->
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh" loading-text=''>
      <van-list
  v-model="loading"
  :finished="finished"
   finished-text="没有更多了"
  @load="onLoad"
> <ArticalList :list='articalList' @removeArt='removeFn'></ArticalList>
</van-list>
</van-pull-refresh>
  </van-tab>
</van-tabs>
    </div>
  </div>
</template>

<script>
import { userChannelAPI, getArticalListAPI, dislikeArticalAPI, reportsAPI } from '@/api'
import ArticalList from './components/ArticalList'
import { Toast } from 'vant'
export default {
  data () {
    return {
      userList: [],
      articalList: [],
      selChannelId: 0, // 选中频道id(默认)
      isLoading: false,
      loading: false,
      finished: false, // 是否还有跟多的数据
      page: 1
    }
  },
  async created () {
    const [, res] = await userChannelAPI()
    // console.log(res)
    this.userList = res.data.data.channels
    this.getArticalList()
  },
  methods: {
    async getArticalList () {
      // 获取文章列表
      const [, articalRes] = await getArticalListAPI({
        channel_id: this.selChannelId,
        timestamp: (new Date()).getTime().toString(),
        with_top: 1,
        page: this.page
      })
      //   判断无更多数据
      if (articalRes.data.data?.results.length === 0) {
        this.finished = true
        return
      }
      articalRes.data.data.results.forEach(obj => this.articalList.push(obj))
      //   this.articalList = [...this.ArticalList, ...articalRes.data.data.results]
      this.isLoading = false
      this.loading = false
      Toast.clear()
    },
    tabFn (nameVal) {
      this.selChannelId = nameVal
      this.articalList = [] // 清空
      this.page = 1
      this.getArticalList()
    },
    onRefresh () { // 下拉刷新
      this.isLoading = false
      this.articalList = []
      this.page = 1
      Toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      this.getArticalList()
    },
    onLoad () {
      this.page++
      this.getArticalList()
    },
    async removeFn (art_id, type) {
      const index = this.articalList.findIndex(obj => obj.art_id === art_id)
      //   找到文章id匹配的元素下标
      this.articalList.splice(index, 1)
      if (type === undefined) {
        await dislikeArticalAPI({
          target: art_id
        })
      } else {
        await reportsAPI({
          target: art_id,
          type: 0
        })
      }
      //   数据删除后少了一个，解决方案
      this.page = 1
      this.articalList = []
      this.getArticalList()
    }
  },
  components: {
    ArticalList
  }
}
// 上拉加载更多
</script>

<style scoped>
.box{
    padding-top: 46px;
}
.logo{
    width: 115px;
    height: 37px;
}
</style>
